<template>
  <div class="login-container">
    <div class="title-container">
      <img src="../../assets/images/topImg.png" width="100%" alt="">
    </div>
    <mu-form ref="loginForm" :model="loginForm" class="login-mu-form" auto-complete="on" labposition="left">
      <mu-form-item :rules="usernameRule" prop="username" class="mu-form-item">
        <span class="svg-container">
          <svg-icon class="icon" icon-class="icon_phone" />
        </span>
        <mu-text-field v-model="loginForm.username" placeholder="输入您的手机号码"/>
      </mu-form-item>
      <mu-form-item :rules="passwordRule" prop="password" class="mu-form-item" >
        <span class="svg-container">
          <svg-icon class="icon" icon-class="icon_password" />
        </span>
        <mu-text-field
          v-model="loginForm.password"
          :type="passwordType"
          placeholder="输入您的密码"
          @keyup.enter.native="handleLogin"/>
        <span class="show-pwd" @click="showPwd">
          <svg-icon icon-class="eye" />
        </span>
      </mu-form-item>
      <mu-form-item :rules="passwordRule" prop="password" class="mu-form-item" >
        <span class="svg-container">
          <svg-icon class="icon" icon-class="icon_check" />
        </span>
        <mu-text-field
          v-model="loginForm.captcha_code"
          placeholder="输入验证码"
          @keyup.enter.native="handleLogin"/>
        <img :src="imgUrl" class="img" alt="" @click="changeCaptcha" >
      </mu-form-item>
      <mu-form-item class="noMgb">
        <div
          class="login-btn org-bg"
          @click="handleLogin">登 录</div>
      </mu-form-item>
    </mu-form>
  </div>
</template>

<script>
// import LangSelect from '@/components/LangSelect'
import { getAdminLogin, setAdminLogin } from '@/utils/auth'
import { getCaptchaCode } from '@/api/login'

export default {
  name: 'Login',
  data() {
    /* eslint-disable */
      return {
        loginForm: {
          username: '',
          password: '',
          captcha_key: '',
          captcha_code: '',
          shop_id: this.$route.query.shop_id, // 从连接获取
          // 获取登陆的途径，验证是否开启了h5插件
          'from': 'h5'
        },
        usernameRule: [
          { validate: (val) => !!val, message: '手机号码不能为空'},
          { validate: (val) => val.length >= 3, message: '用户名长度大于3'}
        ],
        passwordRule: [
          { validate: (val) => !!val, message: '密码不能为空'}
        ],
        passwordType: 'password',
        loading: false,
        showDialog: false,
        imgUrl: ''
      }
    },
    watch: {
      $route: {
        handler: function(route) {
          this.redirect = route.query && route.query.redirect
        },
        immediate: true
      }
    },
    created() {
      this.getLogin()
      this.loginForm.shop_id = this.$route.query.shop_id
      this.$store.commit('SET_SHOP_ID', this.$route.query.shop_id)
    },
    mounted() {
      this.getCaptcha() // 获取验证码
    },
    methods: {
      // 验证手机号
      isPoneAvailable(content) {
        const myReg = /^[1][3,4,5,7,8][0-9]{9}$/
        return myReg.test(content)
      },
      showPwd() { // 对密码的【显示/隐藏】格式切换
        if (this.passwordType === 'password') {
          this.passwordType = ''
        } else {
          this.passwordType = 'password'
        }
      },
      getCaptcha() { // 获取验证码
        getCaptchaCode({ shop_id: this.$route.query.shop_id }).then((res) => {
          const data = res.data
          this.loginForm.captcha_key = data.captcha_key
          this.imgUrl = data.captcha_image_content
        })
      },
      changeCaptcha() { // 点击切换验证码
        this.getCaptcha()
      },
      handleLogin() { // 点击登录
        this.loading = true
        this.$refs.loginForm.validate().then((result) => {
          this.$store.dispatch('LoginByUsername', this.loginForm).then((res) => {
            this.loading = false
            if (res.data.status_code === 200) {
              const loginInfo = JSON.stringify(this.loginForm) // 转化为标准的json格式-键值对
              setAdminLogin(loginInfo)
              this.$router.push({ path: '/' })
            } else {
              // this.$refs.toolTips.showToolTips(res.data.message, 2000)
              // this.$toast.fail({
              //   message: data.message,
              //   duration: 1500
              // })
            }
          }).catch(() => {
            this.loading = false
          })
        })
      },
      getLogin() {
        const loginInfo = getAdminLogin() // 获取用户登录-此方法在util/auth里 js-cookie方法
        if (loginInfo) {
          this.loginForm = JSON.parse(loginInfo) // json字符串转化为对象
          this.loginForm.captcha_code = '' // 把验证码设置为空,不需要验证码
        }
      }
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss">
  @import "src/styles/mixin.scss"; // 修改框架样式
  .login-container{
    background-color: #fff;
    .mu-text-field-input{
      font-size: pxCalc(14px);
      margin-left: pxCalc(36px) !important;
    }
    .mu-form-item{
      margin-bottom: 11px;
    }
    .mu-input-content{
      padding-bottom: 5px;
    }
    .mu-input__focus{
      color: #ff7340;
    }
    .noMgb{
      margin-bottom: 0!important;
    }
  }
</style>
<style rel="stylesheet/scss" lang="scss" scoped>
  @import "src/styles/mixin.scss";
  .login-container{
    max-width: 750px;
    height: 100vh;
    min-height: 100%;
    background: #fff;
    margin: 0 auto;
    .login-mu-form{
      background-color: #fff;
      width: pxCalc(310px);
      margin: 0 auto;
      .mu-form-item{
        position: relative;
        .img{
          position: absolute;
          right: 0;
          top: -10px;
          height: 40px;
        }
        .svg-container{
          position: absolute;
          left: pxCalc(4px);
          .icon{
            font-size: pxCalc(18px);
            vertical-align: pxCalc(0px);
          }
        }
        .show-pwd{
          position: absolute;
          right: pxCalc(4px);
        }
        .login-btn{
          background: #ff7340;
          width: 100%;
          margin: 15px 0;
          line-height: 44px;
          text-align: center;
          font-size: 17px;
          border-radius: 30px;
        }
      }
    }
  }
</style>
